<template>
    <div class="page">
        <scroll ref="scroll" class="scroll-content">
            <div class="scroll-warpper">
                <div class="user-wrapper">
                    <div class="item">
                        <div class="text">新密码</div>
                        <div class="form">
                            <input type="password" placeholder="请填写您的新密码" v-model="modify_pwd.pwd"/>
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">确认密码</div>
                        <div class="form">
                            <input type="password" placeholder="请在此确认新密码" v-model="modify_pwd.again"/>
                        </div>
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="btn-wrapper" @click="submitOrder">
                    <button-medium text="确认" bg="#e3e6e9" ref="btn"></button-medium>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
import Scroll from '../../base/scroll/scroll.vue'
import {cloneObj, Trim} from '../../common/js/dom.js'
import {mapMutations, mapGetters} from 'vuex'
import ButtonMedium from '../parts/buttonMedium.vue'        //按钮
import {toast, indicator} from '../../base/js/toast.js'     //提示信息
export default {
    data() {
        return {
            modify_pwd: {
                pwd:'',             //新密码
                again:''              //重复密码
            }
        }
    },
    components: {Scroll, ButtonMedium},
    computed: {
        // 获取vuex用户对象的电话
        ...mapGetters([
            'user'
        ])
    },
    created() {
        //把vuex的值拷贝给cur_user（不影响源对象）
        this.cur_user = cloneObj(this.user)
    },
    methods: {
        //点击提交信息
        submitOrder(){
            //用户名不能为空
            if(Trim(this.modify_pwd.pwd) == ''){
                toast('新密码不能为空!')
                return false
            }
            //支付宝不能为空
            if(Trim(this.modify_pwd.pwd).length < 6){
                toast('密码不能少于六位数!')
                return false
            }
            if(Trim(this.modify_pwd.again) != Trim(this.modify_pwd.pwd)){
                toast('两次输入的密码不一致!')
                return false
            }
            //全局vux保存user用户的密码
            this.setUserPwd(this.modify_pwd.pwd)
            console.log(this.user)
            //本地保存用户数据
            localStorage.setItem('hs_user', JSON.stringify(this.user))
            //退回上一页
            this.$router.go(-1)
        },
        //修改用户信息
        ...mapMutations({
            setUserPwd: 'SET_USER_PWD' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
    },
    watch: {
        'modify_pwd':{
            handler: function(curVal,oldVal){
                //按钮灰色
                this.$refs.btn.setBgcolor('#e3e6e9')

                //验证按钮颜色
                if(curVal.pwd=='') return
                if(curVal.again=='') return

                //监听用户选择的手机信息，控制提交按钮的样式，黄色
                this.$refs.btn.setBgcolor('#fcdb00')
            },
            deep: true
        }
    }
}
</script>
<style  lang="less" scoped>

@import "../../common/less/variable.less"; 
.scroll-content{
    z-index:92;
    .scroll-warpper{
        .user-wrapper{
            background:#fff;
            padding:0 10px;
            .item{
                display:flex;
                height:50px;
                line-height:50px;
                border-top:1px solid @color-alert-line;
                &.noborder{border:none}
                .text{
                    flex:0 0 70px;
                    font-size:14px;
                    color:@color-alert-title;
                    line-height: 50px;
                }
                .form{
                    flex:1;
                    margin-left:10px;
                    font-size:14px;
                    color:@color-alert-title;
                    line-height:50px;
                    input{
                        font-size:14px;
                        height:50px;
                        line-height:50px;
                        width: 100%;
                        text-indent:4px;
                    }
                    select{
                        border:none;
                        height:50px;
                        width:100%;
                        line-height:50px;
                        margin-right:10px;
                        color:@color-alert-title;
                        box-sizing:border-box;
                        float:left;
                    }
                }
            }
        }
        .btn-wrapper{
            margin-top:10px;
        }
    }
}
</style>
